---
import IconMdiTextBoxSearch from "~icons/mdi/text-box-search";
---

<div class="page-top animated fadeInDown">
  <div
    id="nav"
    class="nav flex overflow-x-auto flex-1 flex-nowrap whitespace-nowrap ml-[30px] mr-4 items-center text-sm gap-6 h-full"
  >
    <div
      th:each="menuItem : ${menuFinder.getPrimary().menuItems}"
      class="nav-item inline-flex items-center h-full text-black/70 hover:text-[#4786D6] relative transition-all"
    >
      <a
        th:href="@{${menuItem.status.href}}"
        th:text="${menuItem.status.displayName}"></a>
    </div>
  </div>
  <div class="information gap-4">
    <div
      th:if="${pluginFinder.available('PluginSearchWidget')}"
      class="rounded-full w-[32px] h-[32px] flex justify-center items-center border hover:bg-gray-600 text-gray-500 hover:text-white transition-all cursor-pointer"
      onclick="SearchWidget.open()"
    >
      <IconMdiTextBoxSearch class="w-4 h-4" />
    </div>
    <div class="avatar">
      <img src="https://ryanc.cc/avatar" alt="Logo" />
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const href = location.href; // http://localhost:8090/
    const pathname = location.pathname; // /
    const origin = location.origin; // http://localhost:8090
    const menuNodes = document.querySelectorAll(".nav .nav-item a");

    const menuNodesArray = Array.from(menuNodes);

    const homeMenu = menuNodesArray.find((node) => {
      return [href, pathname, origin].includes(node.getAttribute("href") || "");
    });

    if (homeMenu) {
      homeMenu.parentElement?.classList.add("current");
      return;
    }

    menuNodes.forEach((node) => {
      const currentHref = node.getAttribute("href");

      if (!currentHref) {
        return;
      }

      if ([href, pathname].includes(currentHref)) {
        console.log(node);
        node.parentElement?.classList.add("current");
        return;
      }
    });
  });
</script>
